<template>
	<view class="">
		<view class="eval-item" v-for="(item,key) in list">
			<view class="goods-body">
				<image :src="item.goods_img"  class="goods-img"></image>
				<view class="goods_r">
					<view class="goods-name">{{item.goods_name}}</view>
					<view class="goods_no">
					 款号：{{item.goods_no}}
					</view>
				</view>
			</view>
			<view class="fade-body">
				<view class="text-box">
					<textarea @input="changeContent()" placeholder-style="color:#c1c1c1" v-model ="form[key].content" placeholder="已经用了一段时间了,有更多宝贝使用心得？分享给想买的他们吧" maxlength="255" class="fade-text"/>
					<view class="text-num">{{form[key].content.length}}/255</view>
				</view>
				<view class="img-box">
					<view class="add-img add-img-show" v-for="(items,keys) in form[key].img">
						<image :src="$img_src + items"  class="add-img-src"></image>
						<view class="delete-img" @tap="deleteImg(key,keys)"><i class="icon">&#xe634;</i></view>
					</view>
					<view class="add-img" @tap="upImg(key)">
						<i class="icon add-plus">&#xe602;</i>
					</view>
				</view>
				
			</view>
		</view>
		<view style="height:180upx"></view>
		<view class="add-btn" @tap="submit()">
			<fade-btn>确认提交</fade-btn>
		</view>
	</view>
</template>

<script>
	import fadeBtn from '../../components/unit/button.vue';
	
	export default{
		components:{fadeBtn},
		data(){
			return {
				order_id : 0,
				list : [],
				form:[{content:''}]
			}
		},
		onLoad(e) {
			this.order_id = e.order_id;
			this.getData();
		},
		methods:{
			//获取页面加载数据
			getData(){
				this.ajax('evals/evalInfo',{
					data:{order_id:this.order_id},
					success:(res) =>{
						console.log(res)
						var data = res.msg;
						for(var i in data) {
							var item = {
								content : '',
								img : [],
								goods_id : data[i].goods_id,
								order_id : this.order_id
							};
							this.form[i] = item;
						}
						this.list = res.msg;
					}
				});
			},
			changeContent(){
				this.$forceUpdate()
			},
			//上传图片
			upImg(key){
				uni.chooseImage({
					sourceType: ['album' , 'camera'],
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '正在上传图片',
							mask: true
						}),
						uni.getImageInfo({
							src : tempFilePaths[0],
							success:(res) => {
								let canvasWidth = res.width //图片原始长宽
								let canvasHeight = res.height
								let img = new Image()
								img.src = res.path
								let canvas = document.createElement('canvas');
								let ctx = canvas.getContext('2d')
								
								var width = canvasWidth;
								var height = canvasHeight;
								this.width_temp = width;
								this.height_temp = height;
								var len = canvasHeight / canvasWidth;
								if(height > 700) {
									height = 700;
								    width = height / len;
								}
								canvas.width = width;
								canvas.height = height;
								ctx.drawImage(img, 0, 0, width, height)
								canvas.toBlob((fileSrc) => {
									let imgSrc = window.URL.createObjectURL(fileSrc)
									console.log('压缩后', imgSrc)
								uni.uploadFile({
									url: '/phone/evals/upFadeImg', //仅为示例，非真实的接口地址
									filePath: imgSrc,
									name: 'file',
									header: {
										'x-requested-with': 'XMLHttpRequest', //自定义请求头信息
									},
									formData: {
										'user': 'test'
									},
									success: (uploadFileRes) => {
										var res = JSON.parse(uploadFileRes.data);
									var url =res.msg;
									if( canvasWidth > canvasHeight ) url =  url+'?x-oss-process=image/rotate,90';
										if(res.code) {
											this.form[key].img.push(url);
											this.$forceUpdate();
											uni.hideLoading()
										} else {
											this.toast('图片上传失败');
										}
									}
								});
								return false;
								})
							}
						})
				    },
				});
			},
			//删除图片
			deleteImg(key,keys){
				this.form[key].img.splice(keys , 1);
				this.$forceUpdate()
			},
			//提交评价
			submit(){
				for(var i in this.form) {
					if(!this.form[i].content)return this.toast('请输入评价内容');
				}
				this.ajax('evals/addEval',{
					data:{form : this.form},
					success:(res) =>{
						this.toast(res.msg);
						if(res.code) {
							setTimeout(()=>{
								uni.navigateBack();
							},1000)
						}
					}
				})
			},
		}
	}
</script>

<style>
	.eval-item{border-bottom: 10upx solid #f9f9f9;}
	.fade-body{width: calc(100% - 60upx);padding:30upx;}
	.text-box{width: 100%;height:300upx;position: relative;clear: both;}
	.fade-text{width: 100%;height:300upx;}
	.text-num{position: absolute;right: 0;bottom: 0;font-size: 24upx;color:#999;}
	.img-box{margin-top:30upx;width: 100%;height: 150upx;}
	.add-img{float: left;width: 150upx;height:150upx;background: #f9f9f9;text-align: center;margin-right: 20upx;position: relative;}
	.add-img-src{width: 150upx;height:150upx;}
	.add-img-show{background: transparent;}
	.add-img .icon{font-size: 70upx;line-height: 150upx;color:#ccc}
	.delete-img{position: absolute;width: 35upx;height: 35upx;background: #DD524D;top:-15upx;right:-15upx;border-radius: 50%;color:#fff;text-align: center;line-height: 30upx;}
	.delete-img .icon{font-size: 20upx;line-height: 30upx;color:#fff;}
	.add-btn{position: fixed;bottom:0upx;width: 100%;left:0;padding:40upx 0;z-index: 9;background: #fff;}
	.goods-body{
		/* overflow: hidden; */
		border-bottom: 1upx solid #F9F9F9;
		/* width: calc(100% - 40upx); */
		padding:20upx;
		display: flex;
		}
		.goods_r {
		margin-left: 20upx;
		}
	.goods-img{width: 80upx;height: 80upx;border-radius: 5upx;float: left;}
	.goods-name{height:46upx;overflow: hidden;}
	.goods_no {
		font-size: 20upx;
		color: #999;
	}
</style>
